<template>
	<view class="goshop-old-container">
		<u-toast ref="uToast"></u-toast>
		<view class="goshop-old-form">
			<u--form
						labelPosition="left"
						:model="form"
						:rules="rules"
						ref="form"
				>
						<u-form-item
								:label="newmobileText"
								prop="mobile"
								borderBottom
								labelWidth="80"
						>
							<u--input
									v-model="form.mobile"
									:placeholder="fillnewmobileText"
									border="none"
							></u--input>
						</u-form-item>
						<u-form-item
							:label="captchaText"
							prop="code"
							labelWidth="80"
							borderBottom
						>
							<u--input
								v-model="form.code"
								border="none"
								:placeholder="fillcaptchaText"
							></u--input>
							<u-button
								slot="right"
								@tap="getCode"
								:text="tips"
								type="error"
								size="mini"
								:disabled="disabled"
							></u-button>
						</u-form-item>
				</u--form>
		</view>
		<u-code
			ref="uCode"
			:changeText="changeText"
			:startText="startText"
			:endText="endText"
			@change="codeChange"
			seconds="20"
			@start="disabled = true"
			@end="disabled = false"
		></u-code>
		<view class="goshop-old-footer u-m-t-20">
			<u-button type="error" @click="doVerifyNewMobile" :text="nextText"></u-button>
		</view>
	</view>
</template>

<script>
	import {sendSmsCode,verifyNewMobile} from '@/common/http.api.js'
	import {isEmpty} from '@/utils/utils';
	export default {
		data() {
			return {
				tips: '',
				disabled: false,
				changeText:'',
				startText:'',
				endText:'',
				form: {
					code: '',
					mobile:'',
				},
				rules:{
					'mobile': {
						type: 'string',
						required: true,
						message: this.fillnewmobileText,
						trigger: ['blur', 'change']
					},
				},
				newmobileText:'',
				fillnewmobileText:'',
				captchaText:'',
				fillcaptchaText:'',
				nextText:'',
				captchesendText:'',
				countdownText:'',
				mobilenotemptyText:'',
				captchenotemptyText:'',
				verifiedText:'',
				captchesenderrText:'',
			};
		},
		onShow(){
		  this.refresh();	
		},
		methods:{
			refresh(){
				this.newmobileText = this.$t('newmobile.newmobile.text');
				this.fillnewmobileText = this.$t('newmobile.fillnewmobile.text');
				this.captchaText = this.$t('newmobile.captcha.text');
				this.fillcaptchaText = this.$t('newmobile.fillcaptcha.text');
				this.nextText = this.$t('common.next.text');
				
				this.captchesendText = this.$t('newmobile.captchesend.text');
				this.captchesenderrText = this.$t('newmobile.captchesenderr.text');
				this.countdownText = this.$t('newmobile.countdown.text');
				this.mobilenotemptyText = this.$t('newmobile.mobilenotempty.text');
				this.captchenotemptyText = this.$t('newmobile.captchenotempty.text');
				this.verifiedText = this.$t('newmobile.verified.text');
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				let that = this;
				if (this.$refs.uCode.canGetCode) {
					sendSmsCode({mobile:this.form.mobile,scene:2}).then(res => {
						if (res.code === 0) {
							this.$refs.uToast.show({
								message: that.captchesendText,
								type: 'success'
							})
							uni.hideLoading();
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						} else {
							uni.hideLoading();
							uni.showModal({
								showCancel: false,
								title: that.captchesenderrText,
								content: res.msg,
							});
						}
					});
				} else {
					uni.$u.toast(that.countdownText);
				}
			},
			doVerifyNewMobile(){
				if(isEmpty(this.form.mobile)){
					this.$refs.uToast.show({
						message: that.mobilenotemptyText,
						type: 'error',
					})
					return;
				}
				if(isEmpty(this.form.code)){
					this.$refs.uToast.show({
						message:  that.captchenotemptyText,
						type: 'error',
					})
					return;
				}
				let newMobile = this.form.mobile;
				verifyNewMobile({params:{code:this.form.code,mobile:this.form.mobile}}).then(res => {
					if (res.code === 0) {
						this.$refs.uToast.show({
							message: that.verifiedText,
							type: 'success',
							complete() {
								uni.navigateTo({
									url: 'pages/common/update/old_mobile?uuid='+res.data+'&newMobile='+newMobile
								});
							}
						})
					} else {
						uni.hideLoading();
						uni.showModal({
							showCancel: false,
							title: res.msg,
							content: res.msg,
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
.goshop-old-container{
	padding: 20rpx;
	.goshop-old-form{
		background-color: $goshop-color-auxiliary-one;
		padding:0 20rpx;
	}
	.goshop-old-footer{
		
	}
}
</style>
